<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>修改信息</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="author" content="kitten">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link rel="stylesheet" href="js/jconfirm/jquery-confirm.min.css">
		<link href="css/style.min.css" rel="stylesheet">
	</head>

	<body>
		<div class="container-fluid p-t-15">

			<div class="row" id="content-page">
				<div class="col-lg-12">
					<div class="card">
						<div class="card-body">

							<div class="form-group">
								<label for="old-password">账号</label>
								<input type="text" id="account" class="form-control" placeholder="请输入账号" disabled v-model="info.account"
									autocomplete="off" />
							</div>
							<div class="form-group">
								<label for="old-password">昵称</label>
								<input type="text" id="nickName" class="form-control" placeholder="请输入昵称" v-model="info.nickName"
									autocomplete="off" />
							</div>
							<div class="form-group">
								<label for="old-password">密码</label>
								<input type="text" id="password" class="form-control" placeholder="请输入密码" v-model="info.pwd"
									autocomplete="off" />
							</div>
							<div class="form-group">
								<label for="old-password">年龄</label>
								<input type="text" id="password" class="form-control" placeholder="请输入年龄" v-model="info.age"
									autocomplete="off" />
							</div>
							<div class="form-group">
								<label for="old-password">性别</label>
								<select class="form-control formRowRight" v-model="info.gender">
									<option>男</option>
									<option>女</option>
								</select>
							</div>
							<div class="form-group">
								<label for="old-password">头像</label>
								<input type="file" id="image" class="form-control formRowRight"/>
								<img :src="info.avatarUrl" style="width:100px;height:100px;" />
							</div>
							<button type="button" class="btn btn-primary" id="editPwd" @click="edit">保存</button>

						</div>
					</div>
				</div>

			</div>

		</div>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/main.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="js/jconfirm/jquery-confirm.min.js"></script>
		<script type="text/javascript" src="js/lib/layui/layui.js"></script>
		<script>
			$(document).ready(function() {
				$('#image').on('change', function(e) {
					var file = e.target.files[0];
					if (file) {
						// 验证文件类型和大小[2,4](@ref)
						if (!file.type.match(/image\/(jpeg|png)/)) {
							alert('请上传 JPG 或 PNG 格式的图片');
							return;
						}
						if (file.size > 5 * 1024 * 1024) {
							alert('文件大小不能超过 5MB');
							return;
						}


						//将此处赋值 修改为 上传图片后的src
						var data = new FormData();
						data.append("file", file);
						$.ajax({
							type: "post",
							url: "http://127.0.0.1:8081/user/uploadImage",
							data: data,
							contentType: false,
							//默认文件类型application/x-www-form-urlencoded  设置之后multipart/form-data
							processData: false,
							// 默认情况下会对发送的数据转化为对象 不需要转化的信息
							success: function(res) {
								//source = res.picAddr;
								var imageUrl = "http://127.0.0.1:8081/" + res.imgUrl;
								dataInfo.image = imageUrl;
							},
						});


					}
				});
			});


			//轻量级框架
			var dataInfo = new Vue({
				el: "#content-page",
				//Vue的数据对象
				data: {
					info: {
					}, //对象
					image: '',
				}, //数据对象结束
				//方法
				methods: {
					GetAll: function() {
						var me = this;
						$.ajax({
							url: "http://127.0.0.1:8081/user/selectById?id="+sessionStorage.getItem("userId"),
							async: false,
							type: "POST",
							contentType: 'application/json',
							dataType: 'json',
							data: JSON.stringify({}),
							success: function(json) {
								me.info = json.user;
							}
						});


					},
					//点击修改
					edit(item) {
						let vm = this;
						vm.info.avatarUrl = vm.image;
						$.ajax({
							url: "http://127.0.0.1:8081/user/update?userId="+sessionStorage.getItem("userId"),
							async: false,
							type: "POST",
							contentType: 'application/json',
							dataType: 'json',
							data: JSON.stringify(vm.info),
							success: function(json) {
								if (json.returnCode == 200) {
									layui.use(['layer'], function() {
										layer.msg('修改成功', {
											icon: 1,
											time: 1000 //2秒关闭（如果不配置，默认是3秒）
										}, function() {
											location.reload();
										});
									})

								} else {
									alert("修改失败");
								}
							}
						});
					},

				}, //方法结束
				created: function() {
					var vm = this;
					vm.GetAll();
				}, //初始加载方法结束
			}); //vue结束
		</script>
	</body>
</html>